<template>
  <div class="article-page">
    <!-- 头部轮播和热门文章区域 -->
    <div class="hero-section">
      <div class="hero-container">
        <el-row :gutter="32" class="hero-content">
          <el-col :lg="16" :md="24" :sm="24">
            <div class="carousel-section">
              <div class="section-header">
                <div class="header-content">
                  <el-icon class="section-icon"><Star /></el-icon>
                  <h2 class="section-title">精选推荐</h2>
                </div>
                <div class="header-decoration"></div>
              </div>
              <div class="carousel-wrapper">
                <lunfan :allSlideshow="data.allSlideshow"></lunfan>
              </div>
            </div>
          </el-col>
          <el-col :lg="8" :md="24" :sm="24">
            <div class="hot-articles-section">
              <el-card class="hot-articles-card" shadow="hover">
                <template #header>
                  <div class="card-header">
                    <div class="header-content">
                      <div class="icon-container">
                        <el-avatar 
                          :size="56" 
                          class="trend-avatar"
                        >
                          <el-icon class="trend-icon"><TrendCharts /></el-icon>
                        </el-avatar>
                      </div>
                      <div class="title-section">
                        <h3 class="main-title">
                          <el-text class="title-text" type="primary" size="large" tag="b">
                            热门文章
                          </el-text>
                        </h3>
                        <el-text class="subtitle-text" type="info" size="small">
                          Popular Articles · 实时更新
                        </el-text>
                      </div>
                    </div>
                    <div class="header-actions">
                      <el-space :size="12">
                        <el-tag 
                          type="primary" 
                          effect="dark" 
                          round 
                          class="count-tag"
                        >
                          <el-icon class="tag-icon"><Collection /></el-icon>
                          {{ data.allHotArticle?.length || 0 }}
                        </el-tag>
                        <el-button 
                          type="primary" 
                          :icon="ArrowUp" 
                          circle 
                          size="small" 
                          class="trend-btn"
                        />
                      </el-space>
                    </div>
                  </div>
                </template>
                <div class="hot-articles-content">
                  <div class="content-header">
                    <el-divider content-position="left">
                      <el-text type="primary" size="small" tag="b">
                        <el-icon class="divider-icon"><Trophy /></el-icon>
                        热度排行
                      </el-text>
                    </el-divider>
                  </div>
                  <el-scrollbar class="articles-scrollbar" height="400px">
                    <div class="articles-list">
                      <hot :allHotArticle="data.allHotArticle"></hot>
                    </div>
                  </el-scrollbar>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 分类和搜索区域 -->
      <el-card class="filter-card" shadow="never">
        <div class="filter-content">
          <!-- 分类区域 -->
          <div class="category-section">
            <div class="category-header">
              <el-icon class="category-icon"><Menu /></el-icon>
              <span class="category-title">文章分类</span>
            </div>
            <div class="category-tags">
              <el-tag
                class="category-tag"
                :type="page.index === 0 ? 'primary' : ''"
                :effect="page.index === 0 ? 'dark' : 'plain'"
                size="large"
                @click="getTechnology(0)"
              >
                推荐
                <el-badge
                  v-if="getTotalCount() > 0"
                  :value="getTotalCount()"
                  class="tag-badge"
                />
              </el-tag>
              <el-tag
                v-for="item in data.allTechnology"
                :key="item.id"
                class="category-tag"
                :type="page.index === item.id ? 'primary' : ''"
                :effect="page.index === item.id ? 'dark' : 'plain'"
                size="large"
                @click="getTechnology(item.id)"
              >
                {{ item.name }}
                <el-badge
                  v-if="item.index > 0"
                  :value="item.index"
                  class="tag-badge"
                />
              </el-tag>
            </div>
          </div>
          
          <!-- 搜索区域 -->
          <div class="search-section">
            <el-input
              v-model="searchWord"
              class="search-input"
              placeholder="搜索文章标题或关键词"
              :prefix-icon="Search"
              size="large"
              clearable
              @keyup.enter="getKeywords"
              @clear="handleClearSearch"
            />
            <el-button 
              type="primary" 
              size="large"
              class="search-button"
              @click="getKeywords"
            >
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </div>
        </div>
      </el-card>
      <div class="content">
        <el-skeleton style="width: 100%" :loading="loading" animated>
          <template #template>
            <div style="padding: 14px">
              <el-skeleton-item
                  variant="image"
                  style="width: 100%; height: 40vh"
              />
            </div>
            <div style="padding: 14px">
              <el-skeleton :rows="5" animated style="width: 100%"/>
            </div>
          </template>
          <template #default>
            <div class="contentXinwen">
              <xinwen
                  :article="item"
                  v-for="item in data.allArticle"
                  :key="item.id"
                  class="xinwen"
              ></xinwen>
              <!--            <loading></loading>-->
            </div>
            <div class="bottomLoading">
              <XWLoding v-show="loading2" v-if="!end"></XWLoding>
              <p v-else align="center" style="padding-bottom: 10px">
                <el-divider content-position="center">没有了</el-divider>
              </p>
            </div>
          </template>
        </el-skeleton>
      </div>
    </div>
  </div>
</template>

<script setup>
import Lunfan from '../components/news/lunfan.vue'
import Hot from '../components/news/hot.vue'
import {onMounted, onUpdated, reactive, ref} from 'vue'
import {Search, Menu, TrendCharts, Star, ArrowUp, Collection, Trophy} from '@element-plus/icons-vue'
import Xinwen from '@/components/news/xinwen.vue'
import XWLoding from '../components/news/XWLoding.vue'
import {Back, TweenMax} from 'gsap'
import axios from '../utils/Axios'
import base from '../api/base'

const searchWord = ref('')
const loading = ref(true)
const loading2 = ref(false)
// const currentDate = new Date().toDateString()
const count = ref(1)
const end = ref(false)

const data = reactive({
  allSlideshow: [],
  allTechnology: [],
  allArticle: [],
  allHotArticle: [],
})
const page = reactive({
  beg: 1,
  end: 8,
  index: 0,
  keywords: 'null',
})

axios.get(base.getArticle + '/1/8/0/null').then(res => {
  console.log("adadsad", res.data)
  data.allSlideshow = res.data.allSlideshow
  data.allTechnology = res.data.allTechnology
  data.allArticle = res.data.allArticle
  data.allHotArticle = res.data.allHotArticle
  loading.value = false
})
let isMount = false
onMounted(() => {
  isMount = true
})
onUpdated(() => {
  if (isMount) {
    TweenMax.staggerFrom(
        '.item',
        1,
        {opacity: 0, x: -50, ease: Back.easeOut},
        0.3
    )
    isMount = false
  }
})

const app = document.getElementById('app')
let isRefresh = false
window.onscroll = function () {
  // 获取距离顶部的距离
  // var scrollTop = app.scrollTop;
  // 获取可视区的高度
  let windowHeight = app.clientHeight
  // 获取滚动条的总高度
  let scrollHeight = app.scrollHeight
  let my =
      document.documentElement.scrollTop ||
      document.body.scrollTop ||
      window.pageYOffset
  // console.log(my+'-'+scrollTop+'-'+windowHeight+'-'+scrollHeight)
  if (my + windowHeight >= scrollHeight - 50 && !end.value) {
    if (!isRefresh && !loading2.value) {
      isRefresh = true
      loading2.value = true
      getArticle().then(res => {
        // console.log(res.data.allArticle.length)
        data.allArticle = res.data.allArticle
        loading2.value = false
        isRefresh = false
        if (res.data.allArticle.length < 8 * count.value) {
          end.value = true
        }
      })
    }
  }
}

function getArticle() {
  // page.beg += 8
  page.end += 8
  count.value++
  return axios.get(
      `/article/getArticle/${page.beg}/${page.end}/${page.index}/${page.keywords}`
  )
}

function getKeywords() {
  loading.value = true
  page.beg = 1
  page.end = 8
  page.keywords = searchWord.value || 'null'
  count.value = 0
  end.value = false
  getArticle().then(res => {
    data.allArticle = res.data.allArticle
    if (res.data.allArticle.length < 8 * count.value) {
      end.value = true
    }
    loading.value = false
  })
  setTimeout(() => {
    TweenMax.staggerFrom('.xinwen', 0.5, {
      opacity: 0,
      y: 50,
      ease: Back.easeOut,
    })
  }, 300)
}

function getTechnology(id) {
  // data.allArticle = []
  loading.value = true
  // 如果点击的是当前已选中的分类，则取消选择
  if (page.index === id) {
    page.index = 0
  } else {
    page.index = id
  }
  page.beg = 1
  page.end = 8
  count.value = 0
  end.value = false
  getArticle().then(res => {
    data.allArticle = res.allArticle
    if (res.data.allArticle.length < 8 * count.value) {
      end.value = true
    }
    loading.value = false
  })
}

function handleClearSearch() {
  searchWord.value = ''
  getKeywords()
}

function getTotalCount() {
  return data.allTechnology.reduce((total, item) => total + item.index, 0)
}
</script>

<style scoped lang="less">
::v-deep .el-divider__text {
  color: #999999;
}

.article-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding-top: 80px;
}

// 头部区域样式
.hero-section {
  padding: 40px 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(10px);
  
  .hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .hero-content {
    align-items: stretch;
  }
  
  // 轮播图区域
  .carousel-section {
    height: 100%;
    
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      
      .header-content {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .section-icon {
          font-size: 24px;
          color: #409eff;
          background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        
        .section-title {
          margin: 0;
          font-size: 24px;
          font-weight: 700;
          color: #2c3e50;
          letter-spacing: 1px;
          background: linear-gradient(135deg, #2c3e50 0%, #409eff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      
      .header-decoration {
        flex: 1;
        height: 2px;
        margin-left: 20px;
        background: linear-gradient(90deg, #409eff 0%, transparent 100%);
        border-radius: 1px;
      }
    }
    
    .carousel-wrapper {
      height: 450px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
      }
    }
  }
  
  // 热门文章区域
  .hot-articles-section {
    height: 100%;
    
    .hot-articles-card {
      height: 560px;
      border-radius: 16px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid var(--el-border-color-light);
      box-shadow: var(--el-box-shadow-light);
      transition: all 0.3s var(--el-transition-function-ease-in-out-bezier);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: var(--el-box-shadow);
        border-color: var(--el-color-primary-light-7);
      }
      
      :deep(.el-card__header) {
        background: linear-gradient(135deg, #fafcff 0%, #f0f9ff 100%);
        border-bottom: 1px solid var(--el-border-color-lighter);
        padding: 24px;
      }
      
      :deep(.el-card__body) {
        padding: 0;
        height: calc(100% - 96px);
      }
      
      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .header-content {
          display: flex;
          align-items: center;
          gap: 16px;
          flex: 1;
          
          .icon-container {
            .trend-avatar {
              background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
              box-shadow: 0 4px 12px var(--el-color-primary-light-8);
              transition: all 0.3s ease;
              
              &:hover {
                transform: scale(1.05);
                box-shadow: 0 6px 16px var(--el-color-primary-light-7);
              }
              
              .trend-icon {
                font-size: 24px;
                color: #ffffff;
              }
            }
          }
          
          .title-section {
            display: flex;
            flex-direction: column;
            gap: 4px;
            
            .main-title {
              margin: 0;
              
              .title-text {
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 0.5px;
              }
            }
            
            .subtitle-text {
              font-size: 13px;
              opacity: 0.8;
            }
          }
        }
        
        .header-actions {
          .count-tag {
            font-weight: 600;
            
            .tag-icon {
              margin-right: 4px;
            }
          }
          
          .trend-btn {
            animation: bounce 2s infinite;
            
            &:hover {
              animation-play-state: paused;
            }
          }
        }
      }
      
      .hot-articles-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        
        .content-header {
          padding: 16px 24px 8px;
          
          :deep(.el-divider) {
            margin: 0;
            
            .el-divider__text {
              background-color: #ffffff;
              padding: 0 12px;
              
              .divider-icon {
                margin-right: 6px;
                color: var(--el-color-warning);
              }
            }
          }
        }
        
        .articles-scrollbar {
          flex: 1;
          
          :deep(.el-scrollbar__view) {
            padding: 0;
          }
          
          :deep(.el-scrollbar__bar.is-vertical) {
            right: 4px;
            width: 6px;
            
            .el-scrollbar__thumb {
              background-color: var(--el-color-primary-light-5);
              border-radius: 3px;
              
              &:hover {
                background-color: var(--el-color-primary-light-3);
              }
            }
          }
        }
        
        .articles-list {
          padding: 8px 24px 24px;
        }
      }
    }
  }
}

// 主要内容区域
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

// 过滤卡片样式
.filter-card {
  margin-bottom: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.filter-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding: 20px;
}

// 分类区域样式
.category-section {
  flex: 1;
  
  .category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    
    .category-icon {
      font-size: 20px;
      color: #409EFF;
    }
    
    .category-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      letter-spacing: 1px;
    }
  }

  .category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    
    .category-tag {
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 20px;
      padding: 8px 16px;
      font-weight: 500;
      position: relative;
      
      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      
      .tag-badge {
        margin-left: 8px;
      }
    }
  }
}

// 动画效果
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-1px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

// 搜索区域样式
.search-section {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  
  .search-input {
    flex: 1;
    
    ::v-deep .el-input__wrapper {
      border-radius: 25px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      
      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
  
  .search-button {
    border-radius: 25px;
    padding: 12px 24px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
    }
  }
}

// 内容区域样式
.content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);

  .contentXinwen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    justify-items: center;
    margin-bottom: 30px;
  }

  .bottomLoading {
    width: 100%;
    text-align: center;
  }
}

// 响应式设计
@media screen and (max-width: 1200px) {
  .filter-content {
    flex-direction: column;
    gap: 20px;
  }
  
  .search-section {
    min-width: auto;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .article-page {
    padding-top: 60px;
  }
  
  .hero-section {
    padding: 20px 15px;
  }
  
  .main-content {
    padding: 0 15px 20px;
  }
  
  .filter-content {
    padding: 15px;
  }
  
  .category-tags {
    gap: 8px;
    
    .category-tag {
      font-size: 12px;
      padding: 6px 12px;
    }
  }
  
  .search-section {
    .search-button {
      padding: 8px 16px;
      font-size: 14px;
    }
  }
  
  .content {
    padding: 20px 15px;
    
    .contentXinwen {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
  
  .hot-articles-card {
    height: 400px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 480px) {
  .hero-section {
    padding: 15px 10px;
  }
  
  .main-content {
    padding: 0 10px 15px;
  }
  
  .content {
    .contentXinwen {
      grid-template-columns: 1fr;
      gap: 15px;
    }
  }
}

// 动画效果
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-1px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
</style>
